import { SvgIcon } from "@/components/icon";
import { CircleLoading } from "@/components/loading";
import { Suspense, lazy } from "react";
import { Navigate, Outlet } from "react-router";
import type { AppRouteObject } from "#/router";

const TaskListPage = lazy(() => import("@/pages/task/list"));
const TaskCategoryPage = lazy(() => import("@/pages/task/category"));

const task: AppRouteObject = {
	order: 3,
	path: "task",
	element: (
		<Suspense fallback={<CircleLoading />}>
			<Outlet />
		</Suspense>
	),
	meta: {
		label: "sys.menu.task.index",
		icon: (
			<SvgIcon
				icon="solar:clipboard-list-bold"
				className="ant-menu-item-icon"
				size="24"
			/>
		),
		key: "/task",
	},
	children: [
		{
			index: true,
			element: <Navigate to="list" replace />,
		},
		{
			path: "list",
			element: <TaskListPage />,
			meta: {
				label: "sys.menu.task.list",
				key: "/task/list",
			},
		},
		{
			path: "category",
			element: <TaskCategoryPage />,
			meta: {
				label: "sys.menu.task.category",
				key: "/task/category",
			},
		},
	],
};

export default task;
